<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>repeat</title>
    <style>
        .code {
            margin: 20px;
        }

        .tip {
            color: darkorange;
        }
    </style>
    <script>
        
    </script>
</head>

<body>
</body>
<script type='module'>
    import{Nodom,Module} from '/dist/nodom.esm.min.js'
    class M1 extends Module{
        template(props){
            return `
                <div>菜名：${props.name}，价格：${props.price}</div>
            `
        }
        
    }
    export class MRepeat extends Module{
        modules=[M1];
        template(){
            return `
            <div class="view">
                <h2> repeat指令</h2>
                <p>repeat指令用于对数组型数据进行渲染。
                <button e-click='pop'>pop</button>
                <button e-click='push'>push</button>
                <button e-click='addFood'>addFood</button>
                <button e-click='desc'>价格降序</button>
                <button e-click='asc'>价格升序</button>
                <button e-click='clear'>清空</button>
                <h3>基本使用</H3>
                <div class="code">
                    <M1 x-repeat={{foods}} class='item' name={{name}} price={{price}}/>
                </div>
                <!--<h3>索引号的使用(编号从0开始)</h3> 
                <p>如果使用索引号，需要在带有repeat的指令中配置index属性，该属性指定索引名。</p>
                <div class='code'>
                    <div x-repeat={{foods}} index='idx'>
                        编号：{{idx}}，菜名：{{name}}，价格：{{price}}
                    </div>
                </div>
                <h3>自定义过滤数组</h3>
                <div class="code">
                    菜单：
                    <for cond={{getOdd(foods)}}>
                        菜名：{{name}}，价格：{{price}}
                    </for>
                </div>
                
                <h3>repeat 嵌套</h3>
                <div class="code">
                    菜单：
                    <div x-repeat={{foods1}} index='idx'>
                        编号：{{idx+1}}，菜名：{{name}}，价格：{{price}}
                        <p>配料列表：</p>
                        <ol>
                            <li x-repeat={{rows}}>食材：{{title}}，重量：{{weight}}</li>
                        </ol>
                    </div>
                </div>-->
            
                <style>
                    .red{
                        color:red;
                    }
                    .blue{
                        color:blue;
                    }
                </style>
            </div>
            `
        }
        data(){
            return{
                show:0,
                date1:new Date().getTime(),
                discount:{data:0.9},
                xxx:true,
                foods: [{
                    name: '夫妻肺片',
                    price: 25
                }, {
                    name: '京酱肉丝',
                    price: 22
                }, {
                    name: '糖醋里脊',
                    price: 20
                }, {
                    name: '红烧茄子',
                    price: 12
                }, {
                    name: '口水鸡',
                    price: 18
                }, {
                    name: '水煮肉片',
                    price: 24
                }],
                foods1:[{
                    name: '夫妻肺片',
                    price: 25,
                    rows:[{title:'芹菜',weight:100},{title:'猪头肉',weight:200}]
                }, {
                    name: '京酱肉丝',
                    price: 22,
                    rows:[{title:'瘦肉',weight:100},{title:'葱',weight:200}]
                }, {
                    name: '糖醋里脊',
                    price: 20,
                    rows:[{title:'排骨',weight:200}]
                }]
            }    
        }
        top(arr){
            var a = [];
            for(let i=0;i<3;i++){
                a.push(arr[i]);
            }
            
            return a;
        }
        getOdd(arr){
            let a1 = [];
            for(let i=0;i<arr.length;i++){
                if(i%2){
                    a1.push(arr[i]);
                }
            }
            return a1;
        }
        sort1(arr){
            return arr.sort((a,b)=> a.price>b.price);
        }
        desc(model){
            model.foods.sort((a,b)=>a.price>b.price?-1:1)
        }
        asc(model){
            model.foods.sort((a,b)=>a.price>b.price?1:-1)
        }
        pop(model){
            model.foods.pop();
        }
        push(model){
            model.foods.push({name:'push菜单',price:50});
            console.log(model.foods);
        }
        addFood(model){
            model.foods.splice(2,0,
                {
                    name: '新增1',
                    price: 20
                },
                {
                    name: '新增2',
                    price: 30
                }
            )
            console.log(model.foods);
        }
        clear(model){
            delete model.foods;
            //清空后再push,pop会报错
            model.foods=[];
            console.log(model);
        }
    
        genCls(index){
            console.log(index);
            return index%2?'red':'blue'
        }
    }
    Nodom.app(MRepeat);
</script>
</html>